<template>
  <!-- 关联分析详情 -->
  <div>
    <el-form inline :model="relationform" ref="relationform" label-width="100px" size="mini">
      <el-form-item label="" prop="startTime">
        <el-date-picker v-model="relationform.startTime" type="datetime" placeholder="选择开始时间" value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
      </el-form-item>
      <el-form-item label="" prop="endTime">
        <el-date-picker v-model="relationform.endTime" type="datetime" placeholder="选择结束时间" value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
      </el-form-item>
      <el-form-item label="" prop="psAreaName">
        <el-select v-model="relationform.psAreaName" placeholder="请选择分站" @change="getAstypeList">
          <el-option v-for="item in AsAreaNamelist" :key="item.psAreaName" :value="item.psAreaCode" :label="item.psAreaName"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="psAreaType">
        <el-select v-model="relationform.psAreaType" placeholder="请选择或输入类型" filterable @change="getareaCodelist">
          <el-option v-for="item in AsAreaTypelist" :key="item.code" :label="item.name" :value="item.code"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="areaCode">
        <el-select v-model="relationform.areaCode" placeholder="请选择或输入传感器" filterable>
          <el-option v-for="item in areaCodelist" :key="item.id" :label="item.ssTransducerPoint" :value="item.id"> </el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary" size="mini" icon="el-icon-search" @click="getsafelist"></el-button>
    </el-form>
    <echarts :chartData="echartData.Police" style="height:280px"></echarts>
    <div class="fuse-title">风势趋势分析</div>
    <echarts :chartData="echartData.Wind" style="height:280px;padding-top:15px;"></echarts>
    <div class="fuse-title">人员数量分析</div>
    <echarts :chartData="echartData.Person" style="height:280px;padding-top:15px;"></echarts>
  </div>
</template>

<script>
import Echarts from '@/components/Echarts'
export default {
  props: {
    AsAreaNamelist: {
      type: Array
    }
  },
  components: {
    Echarts
  },
  data() {
    return {
      relationform: {
        startTime: '',
        endTime: '',
        psAreaName: '',
        psAreaType: '',
        areaCode: ''
      },
      echartData: {
        Police: {
          xData: [],
          series: []
        },
        Wind: {
          xData: [],
          series: []
        },
        Person: {
          xData: [],
          series: []
        }
      },
      AsAreaTypelist: [],
      areaCodelist: []
    }
  },
  methods: {
    getAstypeList() {
      this.relationform.psAreaType = null
      this.$http.get('/safe/showLeftTrans?areaCode=' + this.relationform.psAreaName).then(res => {
        res = res.data
        if (res.code === 200) {
          this.AsAreaTypelist = res.data
        }
      })
    },
    getareaCodelist() {
      this.$http.get('/safe/showTrans?areaCode=' + this.relationform.psAreaName + '&transducerType=' + this.relationform.psAreaType).then(res => {
        res = res.data
        if (res.code === 200) {
          this.areaCodelist = res.data
        }
      })
    },
    getsafelist() {
      this.echartData.Police.xData = []
      this.echartData.Police.series = []
      this.echartData.Wind.xData = []
      this.echartData.Wind.series = []
      this.echartData.Person.xData = []
      this.echartData.Person.series = []
      this.$http
        .get(
          '/safe/alarm_detail?endTime=' +
            this.relationform.endTime +
            '&startTime=' +
            this.relationform.startTime +
            '&psAreaCode=' +
            this.relationform.psAreaName +
            '&transId=' +
            this.relationform.areaCode
        )
        .then(res => {
          res = res.data
          if (res.code === 200) {
            //报警分析
            this.echartData.Police.xData = res.data.transList.map(item => item.csDataTimeStr)
            this.echartData.Police.series.push({
              name: '报警分析',
              data: res.data.transList.map(item => item.ssTransducerValue),
              type: 'line'
            })
            //风速趋势分析
            this.echartData.Wind.xData = res.data.windList.map(item => item.csDataTimeStr)
            this.echartData.Wind.series.push({
              name: '风速趋势分析',
              data: res.data.windList.map(item => item.ssTransducerValue),
              type: 'line'
            })
            //人员数量分析
            this.echartData.Person.xData = res.data.personList.map(item => item.csDataTimeStr)
            this.echartData.Person.series.push({
              name: '人员数量分析',
              data: res.data.personList.map(item => item.ssTransducerValue),
              type: 'line'
            })
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped></style>
